<style lang="less">
html, body, #app {
    height: 100%;
}
.gonggao {
    background: #f6f6f6;
    padding-bottom: 50px;
    height: calc(100% - 96px);
    width: 100%;
    position: absolute;
    font-size: 14px;
	text-align: left;
	.item-box {
		padding-top: 10px;
		background: #f6f6f6;
		.timeBox{
			margin-bottom: 5px;
			.van-col--6{
				width: 45%;
				min-width: 140px;
			}
		}
		.pic {
			width: 40px;
		}
		.con_r {
			background: #fff;
			padding: 10px;
			.tit {
				color: #F7B258;
			}
			.tit_text {
				color: #9FA0A2;
			}
			.tit_cont{
				color: #0E151B;
			}
			.status {
				color: #1AAD00;
			}
		}
		.time {
			display: block;
			background: #D2D3D3;
			color: #fff;
			text-align: center;
			margin-top: 10px;
		}
		&:last-child {
			padding-bottom: 60px;
		}
	}
}
</style>

<template>
	<mxq-router-layout>
		<div class="gonggao">
			<Head slot="header" @headerClick="headerClick($event)" :isIconShow="isIconShow">
				<div slot="headerTitle">
					公告
				</div>
			</Head>
			<div class="item-box" v-for="(item,index) in listArr" @click="getDetail(item.id)">
				<van-row type="flex" justify="center" class="timeBox">
					<van-col span="6"><span class="time">{{ item.time }}</span></van-col>
				</van-row>
				<van-row>
					<van-col span="3" offset="1">
						<img src="@/assets/img/gonggao/touxiang.png" alt="" class="pic">
					</van-col>
					<van-col span="16">
						<div class="con_r">
							<van-row>
								<van-col span="24"><span class="tit">{{ item.type }}</span></van-col>
							</van-row>
							<van-row>
								<van-col span="8"><span class="tit_text">发布人员：</span></van-col>
								<van-col span="16"><span class="tit_cont">{{ item.people }}</span></van-col>
							</van-row>
							<van-row>
								<van-col span="8"><span class="tit_text">发布单位：</span></van-col>
								<van-col span="16"><span class="tit_cont">{{ item.dept }}</span></van-col>
							</van-row>
							<van-row>
								<van-col span="8"><span class="tit_text">发布内容：</span></van-col>
								<van-col span="16"><span class="tit_cont">{{ item.content }}</span></van-col>
							</van-row>
							<van-row>
								<van-col span="8"><span class="tit_text">发布时间：</span></van-col>
								<van-col span="16"><span class="tit_cont">{{ item.time }}</span></van-col>
							</van-row>
							<van-row>
								<van-col span="24"><span class="status">{{ item.read }}</span></van-col>
							</van-row>
						</div>
					</van-col>
				</van-row>
			</div>
		</div>
	</mxq-router-layout>
</template>

<script>
import Head from '@/components/head'
import bus from "../../libs/bus.js"
import { callData } from '../../axios/axios';
import {
	Row,
	Col
} from 'vant';

export default {
    name: 'news',
    components: {
		Head,
		[Row.name]: Row,
		[Col.name]: Col
	},
	data() {
		return {
			isIconShow: false,//是否显示左侧箭头图标
			getQuery: this.$route.query,
			listArr: []
		}
	},
	methods: {
		// 头部两侧按钮点击事件
		headerClick(e){
			bus.$emit('actives',2)
		},
		// 查看公告详情
		getDetail(id){
			let query = {
				id: id
			}
			this.$router.push({
				name:'gonggao_detail',
				query: query
			})
		},
		// 拿到公告详情
		getGgList() {
			let _this = this,
				query = this.getQuery,
				param = {};
			callData('/statisServer/notice/appNoticeByUserId', 'get', param).then(res => {
				if(res.success) this.getListShow(res.data)
			}, err => {
				
			})
		},
		getListShow(item){
			let list = []
			item.forEach((res,index) => {
				let row = JSON.parse(res.SHOW_NAME_JSON),
					DW = (row.gq && row.gq!='') ? row.gq : res.DEPT_NAME;
				let dow = res.NOTICE_TYPE,
					LX = dow == '1'?"系统消息":dow == '2'?"惩罚":dow == '3'?"即时消息":dow == '4'?"奖励":"";
				let RD = res.IS_READ == '0'?"未读":"已读"
				let listRow = {
					id: res.ID,
					type: LX,
					people: res.REALNAME,
					dept: DW,
					content: res.CONTENT,
					time: res.CREATE_TIME,
					read: RD
				}
				list.push(listRow)
			})
			this.listArr = list
		},
	},
	mounted() {
		this.getGgList()
	}
}
</script>